<template>
  <el-card :class="$style['box-card']" class="clearfix" v-for="i in listDatas" v-bind:key="i.id">
    <router-link :to="`/exam/${i.id}?type=${paramData.type}`"
      ><img :src="i.pic ? CDNURL + i.pic : empty" alt="" :class="$style['img']" :onerror="`onerror=null;src='${empty}'`"
    /></router-link>
    <div :class="$style['txt-item']">
      <h6>
        <router-link :to="`/exam/${i.id}?type=${paramData.type}`">{{ i.examName }}</router-link>
      </h6>
      <p :class="$style['type']">{{ i.langName }}</p>
      <p :class="$style['msg']">开始时间：{{ i.startTime }}</p>
      <p :class="$style['msg']">考试时长：{{ i.examTime }} min</p>
      <el-button type="primary" :class="$style['in-btn']" size="small"
        ><router-link :to="`/exam/${i.id}?type=${tabParamData.type}`">参加考试</router-link></el-button
      >
    </div>
  </el-card>
</template>
<script>
import empty from '@/assets/img/empty.png';
import {CDNURL} from '@/utils/constants';
export default {
  props: ['data', 'paramData'],
  data() {
    return {
      listDatas: this.data,
      tabParamData: this.paramData,
      // 空图片
      empty: empty,
      CDNURL: CDNURL
    };
  },
  watch: {
    data: function() {
      this.listDatas = this.data;
    },
  },
};
</script>
<style lang="scss" module>
.box-card {
  margin-top: 60px;
  vertical-align: middle;
  .img {
    display: inline-block;
    width: 300px;
    height: 165px;
    border-radius: 10px;
    object-fit: cover;
    vertical-align: middle;
  }
  .txt-item {
    position: relative;
    display: inline-block;
    margin-left: 57px;
    width: 780px;
    vertical-align: middle;
    h6 a {
      display: block;
      line-height: 44px;
      color: $color-primary;
      font-size: 18px;
      border-bottom: 1px solid $border-color;
      transition: all 0.2s;
      &:hover {
        opacity: 0.8;
      }
    }
    .type {
      font-size: 22px;
      line-height: 56px;
    }
    .in-btn {
      position: absolute;
      bottom: 0;
      right: 0;
      a {
        color: #fff;
      }
    }
  }
}
</style>
